<template>
  <div class="goods">
    <div class="menu-wrapper" ref="wrapperLeft">
      <ul>
        <li
          class="menu-item"
          :class="{select:act===index}"
          @click="changeIndex(index,item.id)"
          v-for="(item, index) of typeArr"
          :key="item.id"
        >
          <span class="text">{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="wrapperRight">
      <div>
        <div class="goods-Swiper">
          <swiper :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for="(item,index) of swiperImg" :key="index">
              <img class="swiper-img" :src="item.img" alt>
            </swiper-slide>
          </swiper>
        </div>
        <div v-for="item of list" :key="item.id">
          <div class="am-intro-hd">
            <h3 class="am-intro-title">{{item.name}}</h3>
            <a
              class="am-intro-more am-intro-more-top"
            >
              <router-link :to="{name:'List', query: { listSel: item.id }}">更多></router-link>
            </a>
          </div>
          <div class="goods-list">
            <ul>
              <li class="goods-list-item" v-for="child of item.child" :key="child.id">
                <div @click="handleClickList(child.id)">
                  <img v-if="child.img" class="clpimg" :src="child.img" alt="">
                  <img v-if="!child.img"  class="clpimg" src="https://evenyou.meimai94buy.com/weixinpl/mshop/images/imgmissing.png" alt="">
                  <p class="clpname">{{child.name}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div style="height:10rem"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
export default {
  name: 'TypeGoods',
  data () {
    return {
      swiperOption: {
        autoplay: 3000,
        loop: true
      },
      swiperImg: [],
      list: [],
      typeArr: ['品牌分类', '女装', '男装', '母婴', '鞋靴', '美妆个护', '珠宝配饰', '箱包手袋', '食品生鲜', '酒水饮料', '家居厨具', '家具家装', '鲜花礼品', '萌宠到家', '手机数码', '电脑办公', '家用电器'],
      act: 0
    }
  },
  methods: {
    handleClickList (res) {
      this.$router.push({ path: '/list', query: { tid: res } })
    },
    changeIndex (index, id) {
      this.act = index
      axios.get('/meimai/interface/goods/getGoodsClass', {
        params: {
          classId: id
        }
      }).then((res) => {
        console.log(res)
        let datas = res.data
        if (datas.code === 0) {
          this.swiperImg = datas.data.bannerArray
          this.list = datas.data.array
        }
        // this.typeArr = res.data.array
      })
    },
    getInfo () {
      axios.get('/meimai/interface/goods/getTopGoodsClass').then((res) => {
        console.log('一级', res)
        let datas = res.data
        this.typeArr = datas.array
        if (datas.array[0].id) {
          axios.get('/meimai/interface/goods/getGoodsClass', {
            params: {
              classId: datas.array[0].id
            }
          }).then((res) => {
            console.log(res)
            let datas = res.data
            if (datas.code === 0) {
              this.swiperImg = datas.data.bannerArray
              this.list = datas.data.array
            }
            // this.typeArr = res.data.array
          })
        }
      })
    }
  },
  computed: {
    showSwiper () {
      return this.swiperImg.length
    }
  },
  mounted () {
    this.getInfo()
    this.leftscroll = new Bscroll(this.$refs.wrapperLeft, {click: true})
    this.rightBscroll = new Bscroll(this.$refs.wrapperRight, {click: true})
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
.goods
  display: flex
  position: absolute
  top: 1.04rem
  bottom: 0.98rem
  width: 100%
  overflow: hidden
  background: #fff
  .menu-wrapper
    width: 25%
    background: #f3f4f6
    .menu-item
      display: table
      height: 1.1rem
      width: 100%
      line-height: 0.28rem
      text-align: center
      border-bottom: 1px solid #DEDBD5
      border-right: 1px solid #DEDBD5
      &:first-of-type
        border-top: 1px solid #DEDBD5
      .text
        height: 1.1rem
        line-height: 1.1rem
        text-align: center
        ellipsis()
        font-size: 0.28rem
        padding: 0 0.2rem 0 0.1rem
    .select
      color: $colorRed
      background-color: white
      border-right: 0
      border-left: 0.1rem solid $colorRed
      border-top: none
      box-sizing: border-box
      &:first-of-type
        border-top: none
  .foods-wrapper
    padding: 0
    width: 75%
    position: relative
    overflow: auto
    .goods-Swiper
      overflow: hidden
      width: 100%
      height: 0
      padding-bottom: 60%
      .swiper-img
        width: 100%
        display: block
        height: auto
    .am-intro-hd
      height: .9rem
      line-height: .9rem
      position: relative
      .am-intro-title
        font-size: .3rem
        font-weight: normal
        color: #a0a0a0
        margin-left: .1rem
        white-space: nowrap
        width: 3.6rem
        overflow: hidden
      .am-intro-more-top
        color: #191919
        position: absolute
        right: 10px
        top: 0
        font-size: 0.25rem
        span
          width: auto
          height: .4rem
          line-height: .4rem
    .goods-list
      padding: .1rem .1rem 0 .1rem
      .goods-list-item
        width: 33.33333333%
        display: block
        height: auto
        float: left
        padding: .1rem .05rem
        box-sizing: border-box
        .clpimg
          width: 100%
          height: auto
        .clpname
          text-align: center
          color: #333
          line-height: .3rem
</style>
